<template>
	<view class="content">
		<!-- 自定义导航栏 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="首页" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			</u-navbar>
		</view>

		<!-- 头部搜索 -->
		<view class="top">
			<view class="">
				<u-icon name="map" class="icon-top" size="25"" color=" white"></u-icon>
			</view>
			<view class="">
				<image src="../../static/images/logo.png" mode="" style="margin-top: 10rpx ;"></image>
			</view>
			<view class="">
				<u-search shape="square" :showAction="false" :disabled="true" @click="gosearch"></u-search>
			</view>
			<view>
				<u-icon name="home" class="icon-top" size="25""color=" white"></u-icon>
			</view>
		</view>

		<!-- 头部 -->
		<view>
			<u-tabs :list="catelist" keyName="catename" lineColor="white" @click="goList"></u-tabs>
		</view>

		<!-- 轮播图 -->
		<view class="">
			<u-swiper :list="bannerlist" indicator indicatorMode="line" circular previousMargin="30" nextMargin="30"
				radius="15" height="150"></u-swiper>
		</view>

		<!-- 限时秒杀 -->
		<view class="seckill">
			<view class="seckill_center">
				<image src="../../static/images/限时抢购.png" mode=""></image>
				<view class="seckill_size">限时秒杀</view>
			</view>
			<view class="seckill_center">
				<image src="../../static/images/限时抢购.png" mode=""></image>
				<view class="seckill_size">限时秒杀</view>
			</view>
			<view class="seckill_center">
				<image src="../../static/images/限时抢购.png" mode=""></image>
				<view class="seckill_size">限时秒杀</view>
			</view>
			<view class="seckill_center">
				<image src="../../static/images/限时抢购.png" mode=""></image>
				<view class="seckill_size">限时秒杀</view>
			</view>
			<view class="seckill_center">
				<image src="../../static/images/限时抢购.png" mode=""></image>
				<view class="seckill_size">限时秒杀</view>
			</view>
		</view>

		<!-- 三张图片 -->
		<view class="three" style="flex-wrap: wrap;">
			<view class="three_one">
				<image src="../../static/images/图1.png" mode=""></image>
			</view>
			<view class="three_two">
				<view class="">
					<image src="../../static/images/图2.png" mode=""></image>
				</view>
				<view class="">
					<image src="../../static/images/图3.png" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 双11尖货订购 -->
		<view class="">
			<view class="both">
				<view style="font-size: 40rpx; color: orangered;">双11尖货订购</view>
				<view>畅购全球</view>
			</view>
			<view class="both_image">
				<image src="../../static/images/底1.png" mode=""></image>
				<image src="../../static/images/底2.png" mode=""></image>
				<image src="../../static/images/底3.png" mode=""></image>
				<image src="../../static/images/底4.png" mode=""></image>
			</view>
		</view>

		<!-- 滚动通知 -->
		<u-notice-bar :text="text1"></u-notice-bar>

		<!-- 热门推荐三个 -->
		<view class="">
			<u-subsection :list="list" :current="curNow" fontSize="16" @change="sectionChange"></u-subsection>
		</view>

		<!-- 热门推荐三个内容 -->
		<view class="all" v-if="gethortgoodslist.length > 0">
			<view class="hot" v-for="(item,index) in gethortgoodslist[curNow].content" :key="item.id">
				<view class="hot_image">
					<image :src="'http://localhost:3000' + item.img" mode=""></image>
				</view>
				<view class="hot_text">
					<view class="hot_text_title">{{item.goodsname}}</view>
					<view class="" style="color: red;">现价格: <text>¥{{item.price}}</text> </view>
					<del style="color: #ccc;">
						<view class="" style="color: #ccc;">原价格: <text>¥{{item.market_price}}</text> </view>
					</del>
					<view class=""> <button type="default" class="btn" @click="goDetail(item.id)">立即抢购</button> </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['热门商品', '上新推荐', '全部商品'],
				curNow: 0, // 热门推荐三个数据的下标
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				catelist: [], // 首页一级分类
				// catelistIndex:0, // 首页一级分类下标
				bannerlist: [], // 首页轮播图
				gethortgoodslist: [], // 首页下面数据
			}
		},
		onLoad() {
			// 首页一级分类
			this.$http({
				url: '/api/getcate'
			}).then((res) => {
				// console.log(res);
				if (res.data.code == 200) {
					this.catelist = res.data.list
				}
				// console.log(this.catelist);
			})
			// 首页轮播图
			this.$http({
				url: '/api/getbanner'
			}).then((res) => {
				// console.log(res);
				if (res.data.code == 200) {
					this.bannerlist = res.data.list.map(item => 'http://localhost:3000' + item.img);
					// console.log(this.bannerlist);
				}
			})
			// 首页下面数据
			this.$http({
				url: '/api/gethortgoods'
			}).then((res) => {
				// console.log(res);
				if (res.data.code == 200) {
					this.gethortgoodslist = res.data.list
				}
				// console.log(this.gethortgoodslist);
			})
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			// 跳转搜索页
			gosearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			// 跳转到列表
			goList({
				id
			}) {
				// console.log(e);
				// let id = e.id
				// console.log(id);
				uni.navigateTo({
					url: `/pages/list/list?id=${id}&type=1`
				})
			},
			// 跳转到详情页
			goDetail(id) {
				// console.log(id);
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			}
		}
	}
</script>

<style scoped>
	@import '@/static/css/index.css'
</style>